<template>
  <div class="head" v-loading="load">
    <div class="title">
      <span>{{ type === '1' ? '应收款' : '应付款' }}信息：</span>
    </div>
    <el-row :gutter="20" style="margin: 0">
      <el-col :span="6" style="padding: 0" v-for="item in baseInfo" :key="item">
        <div class="col-content">
          <div class="label-info"
            ><svg-icon icon-class="money-rmb" class="icons" />
            {{ type === '1' ? item.day + '应收:' : item.day + '应付:' }}
          </div>
          <div class="content-info">
            {{ item.daty ? numberFormat(item.allMoney) : numberFormat(item.leftMoney) }}&nbsp;元
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { numberFormat } from '@/utils/numberFormat.ts'
  import { postPaymentCycleGetAbstract } from '@/api/controller/payment-cycle-controller/index'
  import { postCollectionCycleGetAbstract } from '@/api/controller/collection-cycle-controller/index'
  const load = ref(true)

  //获取数据
  const baseInfo = ref<any>([])
  const type = ref(history.state?.contractType)
  const contractId = ref(history.state?.contractId)
  const getData = async () => {
    try {
      load.value = true
      let res
      if (type.value === '1') {
        res = await postCollectionCycleGetAbstract({
          contractId: contractId.value,
        })
        baseInfo.value = res.data
      } else {
        res = await postPaymentCycleGetAbstract({
          contractId: contractId.value,
        })
        baseInfo.value = res.data
      }
      baseInfo.value.forEach((item) => {
        if (item.day === 0) {
          item.day = ''
        } else {
          item.day = item.day + '天内'
        }
      })
    } finally {
      load.value = false
    }
  }

  defineExpose({
    getData,
  })
</script>

<style lang="scss" scoped>
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    span {
      font-size: 16px;
      font-weight: 700;
    }
  }
  .head {
    background-color: white;
    margin: 0 0 16px 0;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
  }
  .col-content {
    display: flex;
    height: 100%;
    .label-info {
      display: flex;
      align-items: center;
      justify-content: end;
      color: #606266;
      font-weight: bold;
      font-size: 14px;
      background-color: #f5f7fa;
      min-width: 110px;
      border: 1px solid #ebeef5;
      padding: 10px;
      .icons {
        margin-right: 6px;
        height: 16px;
        width: 16px;
      }
    }
    .content-info {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 10px;
      border: 1px solid #ebeef5;
    }
  }
</style>
